<!-- 任务抽屉（包含上传、下载任务） -->
<template>
  <a-drawer
    :open="exportListDrawerStore.open"
    class="custom-class"
    :body-style="{ padding: '24px 0 0' }"
    root-class-name="root-class-name"
    placement="right"
    :closable="false"
    mask-closable
    @close="handleClose"
  >
    <div class="file-task-card">
      <div class="tabs-wrap">
        <ul class="tabs">
          <li class="tab-item">下载队列</li>
        </ul>
        <a-button type="text" class="icon-only-btn icon-close-btn" @click="handleClose"><i class="iconfont icon-close-line"></i></a-button>
      </div>
      <p class="statistics-wrap">共计 {{ exportListDrawerStore.getTotalCount }}</p>
      <div class="file-task-card-wrap">
        <down-list
          :data-list="exportListDrawerStore.downList"
          @download="exportListDrawerStore.download"
          @clear-all="exportListDrawerStore.removeAllTask"
          @remove="exportListDrawerStore.removeTask"
        />
      </div>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
  import DownList from '@/components/TaskList/LocalExportList/index.vue'

  import { useExportListDrawer } from './store'

  const exportListDrawerStore = useExportListDrawer()

  const emits = defineEmits<{
    (e: 'close'): void
  }>()

  const handleClose = () => {
    emits('close')
    exportListDrawerStore.closeDrawer()
  }
</script>

<style lang="less" scoped>
  .file-task-card {
    display: flex;
    height: 100%;
    flex-direction: column;

    .tabs-wrap {
      position: relative;
      padding: 0 24px 20px;

      .tabs {
        display: flex;
        gap: 0 40px;

        .tab-item {
          position: relative;
          font-size: 16px;
          color: rgba(21, 23, 27, 0.95);
          font-weight: 400;
          line-height: 24px;
          cursor: pointer;
        }
      }

      .icon-close-btn {
        position: absolute;
        top: 0;
        right: 24px;
        z-index: 1;
      }
    }

    .statistics-wrap {
      padding: 0 24px 16px;
      font-size: 14px;
      color: rgba(25, 25, 48, 0.75);
      font-weight: 400;
      line-height: 22px;
    }

    .file-task-card-wrap {
      display: flex;
      overflow: hidden;
      height: 100%;
      flex-direction: column;
    }
  }
</style>
